<template>
  <v-select valueKey="id" label="name" :multiple="true"
            v-bind:value="value"
            :on-change="onChange"
            :options="tags"
            :on-search="onSearchTags">
  </v-select>
</template>

<script type="javascript">
  import vSelect from 'resources/assets/js/components/Select.js';
  import _ from 'lodash';

  export default {
    components: {
      'v-select': vSelect
    },
    props: {
      value: {
        default: null
      },
    },
    data: function () {
      return {
        tags: []
      };
    },
    methods: {
      onChange: function(val){

      },
      onSearchTags: _.debounce(function (search, loading) {
        loading(true)
        this.$http.get('/tag', {
          params: {
            draw: Date.now(),
            start: 0,
            length: 25,
            columns: [
              {data: 'id'},
              {data: 'name', searchable: true}
            ],
            search: {
              value: search,
              regex: false
            }
          }
        }).then(resp => {
          this.tags = _.uniqWith(this.tags.concat(resp.data.data), (a, b) => {
            return a.id == b.id
          });
          loading(false)
        });
      }, 500)
    }
  };
</script>

<style lang="scss">

</style>
